<!DOCTYPE html>
<html>
  <head>
    <title>CSS Selectors</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body,
      html {
        width: 100vw;
        height: 100vh;
      }

      main {
        width: 100%;
        height: 100%;
        background-color: #000;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
      }

      .dice {
        width: 150px;
        height: 150px;
        background-color: #fff;
        border-radius: 10%;
        display: flex;
        padding: 30px;
      }

      .dot {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: #000;
      }

      .start {
        justify-content: start;
      }

      .mid {
        display: flex;
        justify-content: center;
      }

      .end {
        justify-content: end;
      }

      .colum {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .dot2inline {
        display: flex;
        justify-content: space-between;
      }

      .top {
        align-self: start;
      }

      .middle {
        align-self: center;
      }

      .bottom {
        align-self: end;
      }
    </style>
  </head>
  <body>
    <main>
      <!-- 第一个 -->
      <section class="dice mid">
        <div class="dot middle"></div>
      </section>

      <!-- 第二个 -->
      <section class="dice dot2inline">
        <div class="dot top"></div>
        <div class="dot bottom"></div>
      </section>

      <!-- 第三个 -->
      <section class="dice dot2inline">
        <div class="dot top"></div>
        <div class="dot middle"></div>
        <div class="dot bottom"></div>
      </section>

      <!-- 第四个 -->
      <section class="dice colum">
        <div class="dot2inline">
          <div class="dot top"></div>
          <div class="dot top"></div>
        </div>
        <div class="dot2inline">
          <div class="dot bottom"></div>
          <div class="dot bottom"></div>
        </div>
      </section>

      <!-- 第五个 -->
      <section class="dice colum">
        <div class="dot2inline">
          <div class="dot top"></div>
          <div class="dot top"></div>
        </div>

        <div class="mid">
          <div class="dot middle"></div>
        </div>

        <div class="dot2inline">
          <div class="dot bottom"></div>
          <div class="dot bottom"></div>
        </div>
      </section>

      <!-- 第六个 -->
      <section class="dice colum">
        <div class="dot2inline">
          <div class="dot bottom"></div>
          <div class="dot bottom"></div>
        </div>

        <div class="dot2inline">
          <div class="dot bottom"></div>
          <div class="dot bottom"></div>
        </div>

        <div class="dot2inline">
          <div class="dot bottom"></div>
          <div class="dot bottom"></div>
        </div>
      </section>
    </main>
  </body>
</html>
